<template>
  <div class="service-manage-container">
    <h1 class="page-title">💆 宠物服务管理</h1>

    <el-tabs v-model="activeTab">
      <!-- 服务项目管理 -->
      <el-tab-pane label="服务项目" name="services">
        <el-button type="success" icon="el-icon-plus" @click="handleAddService" style="margin-bottom: 15px;">
          新增服务
        </el-button>

        <el-table :data="serviceList" v-loading="loading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="服务名称"></el-table-column>
          <el-table-column prop="description" label="服务描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="duration" label="时长">
            <template slot-scope="scope">
              {{ scope.row.duration }}分钟
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <span class="price">¥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
                {{ scope.row.status === 'active' ? '启用' : '停用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEditService(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="danger" @click="handleDeleteService(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 服务预约管理 -->
      <el-tab-pane label="预约管理" name="reserves">
        <el-form :inline="true" :model="reserveSearchForm" style="margin-bottom: 15px;">
          <el-form-item label="状态">
            <el-select v-model="reserveSearchForm.status" placeholder="请选择" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="待确认" value="pending"></el-option>
              <el-option label="已确认" value="confirmed"></el-option>
              <el-option label="已完成" value="finished"></el-option>
              <el-option label="已取消" value="cancelled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearchReserve">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="reserveList" v-loading="loading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="serviceName" label="服务名称"></el-table-column>
          <el-table-column prop="userName" label="用户"></el-table-column>
          <el-table-column prop="petName" label="宠物"></el-table-column>
          <el-table-column prop="reserveDate" label="预约时间" width="160"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getReserveStatusType(scope.row.status)">
                {{ scope.row.statusName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleViewReserve(scope.row)">
                查看
              </el-button>
              <el-button size="mini" type="success" @click="handleConfirmReserve(scope.row)"
                         v-if="scope.row.status === 'pending'">
                确认
              </el-button>
              <el-button size="mini" type="warning" @click="handleFinishReserve(scope.row)"
                         v-if="scope.row.status === 'confirmed'">
                完成
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 服务项目对话框 -->
    <el-dialog :title="serviceDialogTitle" :visible.sync="serviceDialogVisible" width="600px">
      <el-form :model="serviceForm" ref="serviceForm" label-width="100px">
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="serviceForm.name" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input type="textarea" v-model="serviceForm.description"
                    :rows="3" placeholder="请输入服务描述"></el-input>
        </el-form-item>
        <el-form-item label="时长(分钟)">
          <el-input-number v-model="serviceForm.duration" :min="0" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model.number="serviceForm.price" placeholder="请输入价格">
            <template slot="prepend">¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="serviceForm.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="serviceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitService">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import serviceApi from '@/api/service'

export default {
  name: 'ServiceManage',
  data () {
    return {
      activeTab: 'services',
      loading: false,
      serviceList: [],
      reserveList: [],
      reserveSearchForm: {
        status: ''
      },
      serviceDialogVisible: false,
      serviceDialogTitle: '新增服务',
      serviceForm: {
        name: '',
        description: '',
        duration: 60,
        price: 0,
        status: 'active'
      }
    }
  },
  created () {
    this.loadServiceList()
    this.loadReserveList()
  },
  methods: {
    async loadServiceList () {
      this.loading = true
      try {
        const res = await serviceApi.getServiceList({ page: 1, size: 100 })
        this.serviceList = res.data || []
      } catch (error) {
        this.$message.error('加载失败：' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    async loadReserveList () {
      this.loading = true
      try {
        const params = {
          page: 1,
          size: 100,
          ...this.reserveSearchForm
        }
        const res = await serviceApi.getServiceReserves(params)
        this.reserveList = res.data || []
      } catch (error) {
        this.$message.error('加载失败：' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    handleAddService () {
      this.serviceDialogTitle = '新增服务'
      this.serviceForm = {
        name: '',
        description: '',
        duration: 60,
        price: 0,
        status: 'active'
      }
      this.serviceDialogVisible = true
    },
    handleEditService (row) {
      this.serviceDialogTitle = '编辑服务'
      this.serviceForm = { ...row }
      this.serviceDialogVisible = true
    },
    handleDeleteService (row) {
      this.$confirm(`确认删除服务 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await serviceApi.deleteService(row.id)
          this.$message.success('删除成功')
          this.loadServiceList()
        } catch (error) {
          this.$message.error('删除失败：' + (error.message || '未知错误'))
        }
      })
    },
    async handleSubmitService () {
      try {
        if (this.serviceForm.id) {
          await serviceApi.updateService(this.serviceForm)
        } else {
          await serviceApi.createService(this.serviceForm)
        }
        this.$message.success('操作成功')
        this.serviceDialogVisible = false
        this.loadServiceList()
      } catch (error) {
        this.$message.error('操作失败：' + (error.message || '未知错误'))
      }
    },
    handleSearchReserve () {
      this.loadReserveList()
    },
    handleViewReserve (row) {
      this.$message.info(`查看预约详情：${row.id}`)
    },
    handleConfirmReserve (row) {
      this.$confirm('确认该预约吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await serviceApi.updateServiceReserveStatus(row.id, 'confirmed')
          this.$message.success('已确认')
          this.loadReserveList()
        } catch (error) {
          this.$message.error('确认失败：' + (error.message || '未知错误'))
        }
      })
    },
    handleFinishReserve (row) {
      this.$confirm('确认完成该服务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await serviceApi.updateServiceReserveStatus(row.id, 'finished')
          this.$message.success('已完成')
          this.loadReserveList()
        } catch (error) {
          this.$message.error('操作失败：' + (error.message || '未知错误'))
        }
      })
    },
    getReserveStatusType (status) {
      const typeMap = {
        'pending': 'warning',
        'confirmed': 'primary',
        'finished': 'success',
        'cancelled': 'info'
      }
      return typeMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.service-manage-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}
</style>
